<script lang="ts">
import {ElLoadingComponent} from "element-ui/types/loading";
import {Loading, Message, MessageBox, Notification} from "element-ui";
import {ElMessageComponent} from "element-ui/types/message";
import {ElNotificationComponent, NotificationPosition} from "element-ui/types/notification";
import {MessageTypeEnum} from "./enum/common.enum";
import {Vue, Component} from "vue-property-decorator";
import {StoreDictEnum} from "@/store/enum/store.enum";


@Component({})
export default class BaseVue extends Vue {
    /**
     * 弹窗时间
     */
    private messageDuration: number = 3000;
    
    private messageComponent: ElMessageComponent;
    private notification: ElNotificationComponent;
    
    /**
     * @description 全局加载层
     * @param {*} index
     * @param {*} text
     */
    public baseLoading(index: number, text: string): ElLoadingComponent {
        let loading
        if (!index) {
            loading = Loading.service({
                lock: true,
                text,
                background: 'hsla(0,0%,100%,.8)',
            })
        } else {
            loading = Loading.service({
                lock: true,
                text,
                spinner: 'loading-type' + index,
                background: 'hsla(0,0%,100%,.8)',
            })
        }
        return loading
    }
    
    
    /**
     * @description 全局多彩加载层
     * @param {*} index
     * @param {*} text
     */
    public baseColorFullLoading(index, text): ElLoadingComponent {
        let loading
        if (!index) {
            loading = Loading.service({
                lock: true,
                text: text,
                spinner: 'dots-loader',
                background: 'hsla(0,0%,100%,.8)',
            })
        } else {
            switch (index) {
                case 1:
                    index = 'dots'
                    break
                case 2:
                    index = 'gauge'
                    break
                case 3:
                    index = 'inner-circles'
                    break
                case 4:
                    index = 'plus'
                    break
            }
            loading = Loading.service({
                lock: true,
                text: text,
                spinner: index + '-loader',
                background: 'hsla(0,0%,100%,.8)',
            })
        }
        return loading
    }
    
    /**
     * @description 全局Message
     * @param {*} message
     * @param {*} type
     * @param {*} dangerouslyUseHTMLString
     * @param {*} customClass
     */
    public baseMessage(message: string,
                       type: MessageTypeEnum = MessageTypeEnum.info,
                       dangerouslyUseHTMLString?: boolean,
                       customClass?: string): void {
        if (this.messageComponent) {
            this.messageComponent.close();
        }
        this.messageComponent = Message({
            showClose: true,
            message: this.translate(message),
            type,
            dangerouslyUseHTMLString,
            duration: this.messageDuration,
            customClass,
        })
    }
    
    /**
     * 全局弹窗
     * @param content
     * @param title
     * @param callback
     */
    public baseAlert(content: string, title: string = 'label.Tips', callback: Function) {
        MessageBox.alert(content, this.translate(title), {
            confirmButtonText: this.translate('button.sure'),
            dangerouslyUseHTMLString: true,
            callback: callback,
        });
    }
    
    
    /**
     * @description 全局Confirm
     * @param {*} message
     * @param {*} title
     * @param {*} confirmCallback
     * @param {*} cancelCallback
     * @param {*} confirmButtonText 确定按钮文字
     * @param {*} cancelButtonText 取消按钮文字
     * @param type 弹窗类型
     */
    public baseConfirm(
        message: string,
        title: string,
        confirmCallback: Function,
        cancelCallback: Function,
        confirmButtonText: string = 'button.sure',
        cancelButtonText: string = 'button.cancel',
        type: MessageTypeEnum = MessageTypeEnum.warning,
    ) {
        MessageBox.confirm(
            this.translate(message),
            this.translate(title),
            {
                confirmButtonText: this.translate(confirmButtonText),
                cancelButtonText: this.translate(cancelButtonText),
                closeOnClickModal: false,
                type,
                lockScroll: false,
            }).then(() => {
            confirmCallback()
        }).catch(() => {
            cancelCallback()
        });
    }
    
    /**
     * @description 全局Notification
     * @param {*} message
     * @param {*} title
     * @param {*} type
     * @param {*} position
     */
    public baseNotify(message: string, title: string,
                      type: MessageTypeEnum = MessageTypeEnum.success,
                      position: NotificationPosition = 'top-right') {
        if (this.notification) {
            this.notification.close();
        }
        this.notification = Notification({
            title: this.translate(title),
            message: this.translate(message),
            position,
            type,
            duration: this.messageDuration,
        })
    }
    
    /**
     * @description 表格高度
     * @param {*} formType
     */
    public baseTableHeight(formType: string | number) {
        let height = window.innerHeight
        let paddingHeight = 291
        const formHeight = 60
        
        if ('number' == typeof formType) {
            height = height - paddingHeight - formHeight * formType
        } else {
            height = height - paddingHeight
        }
        return height
    }
    
    
    /**
     * 国际化
     * tips.xxxx
     * bizMsg.xxx
     * label.xxxx
     */
    get translate() {
        return (key: string, param?: {}): string => {
            let i18n = this.$store.getters[StoreDictEnum.i18n];
            if (this.$i18n.te(key)) {
                return this.$i18n.t(key, param) as string;
            }
            return key;
        }
    }
    
}

</script>
